<template>
  <div class="_loading-icon" v-bind="loadingIconProps"></div>
</template>

<script lang="tsx" setup>
import { loadingProps } from "./loading";

const props = defineProps(loadingProps);

const loadingIconProps = computed(() => {
  return {
    style: {
      border: `${props.trackWidth}px solid ${props.trackColor}`,
      borderTopColor: props.loadingColor
    }
  }
})
</script>

<style lang="less" scoped>
@keyframes rotate-forever {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


._loading-icon {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  animation: rotate-forever 2s linear infinite;
  transform-origin: center;
}
</style>
